<!--
 * @Autor: Hongting Yuan
 * @Date: 2022-08-16 15:03:28
 * @LastEditors: Hongting Yuan
 * @LastEditTime: 2022-08-16 17:57:51
 * @Description: file content
 * @FilePath: \video_test\src\views\home.vue
-->
<template>
  <div>
    <!-- 侧边栏 -->
    <div style="background-color: #545c64; width: 10%;float: left;height: 100vh;">
      <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
        active-text-color="#ffd04b" router unique-opened style="height: 100%">
        <el-submenu v-for="(item,i) in menuList" :key="item.id" :index="item.id + ''" :disabled="item.disabled">
          <!-- 一级菜单的模板区域 -->
          <template slot="title">
            <span>{{ item.name }}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="'/' + subItem.path"
            :disabled="subItem.disabled">
            <!-- 导航开启路由模式：
                    将index值作为导航路由 -->
            <!-- 二级菜单的模板区域 -->
            <template slot="title">
              <span>{{ subItem.name }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div style="width: 90%;float: left;">
      <router-view />
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import crypto from '../crypto/crypto'
  export default {
    name: 'Home',
    data () {
      return {
        // 左侧菜单数据
        menuList: []
      }
    },
    created () {
      this.getMenuList()
    },
    methods: {
      getMenuList () {
        this.menuList = [
          {
            id: 1,
            name: '录制',
            children: [
              {
                id: 2,
                name: '视频',
                path: crypto.set('2'),
                disabled: false
              }
            ]
          },
          {
            id: 3,
            name: '测试',
            children: [
              {
                id: 4,
                name: 'test',
                path: crypto.set('4'),
                disabled: false
              }
            ]
          },
        ]
      },
    }
  }
</script>